<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="SPU名称">{{spu.spuName}}</el-form-item>
      <el-form-item label="SKU名称">
        <el-input  placeholder="sku名称" v-model='skuInfo.skuName'></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input  placeholder="价格(元)" type='number' v-model=skuInfo.price></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input  placeholder="重量(千克)" v-model='skuInfo.weight'></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input  type='textarea' row=6 v-model='skuInfo.skuDesc'></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline='true' label-width="100px" label-position='right'>
          <el-form-item :label="attr.attrName" v-for='attr in attrInfoList' :key='attr.id'>
            <el-select placeholder="请选择" v-model='attr.attrIdAndValueId'>
              <!-- 收集的数据是value 收集到哪v-model -->
              <el-option :value='`${attr.id}:${attrValue.id}`' :label='attrValue.valueName' v-for='attrValue in attr.attrValueList' :key='attrValue.id'>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline='true' label-width="100px" label-position='right'>
          <el-form-item :label="saleAttr.saleAttrName" v-for='saleAttr in spuSaleAttrList' :key='saleAttr.id'>
            <el-select placeholder="请选择" v-model='saleAttr.saleAttrIdAndValueId'>
              <el-option :value='`${saleAttr.id}:${saleAttrValue.id}`'
                v-for="saleAttrValue in saleAttr.spuSaleAttrValueList"
                :key="saleAttrValue.id"
                :label="saleAttrValue.saleAttrValueName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table  style="width: 100%" border :data='spuImageList'  @selection-change="handleSelectionChange">
          <el-table-column prop="prop" type="selection" width="80">
          </el-table-column>
          <el-table-column prop="prop" label="图片" width="width">
            <template v-slot='{row}'>
              <img :src='row.imgUrl' style='width: 100px; height: 100px'>
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template v-slot='{row}'>
              <el-button type="primary" v-if='row.isDefault==0' size='small' @click='changeDefault(row)'>设置默认</el-button>
              <el-button type="" v-else size='small'>默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click='save'>保存</el-button>
        <el-button type="" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SkuForm',
  data () {
    return {
      // 存储3个请求回来的数据
      spuImageList: [],
      spuSaleAttrList: [],
      attrInfoList: [],
      // 收集sku信息 根据保存的api需要的参数而定： 需要收集父组件给的数据
      skuInfo: {
        category3Id: 0,
        spuId: 0,
        tmId: 0,
        // 收集自己书写的自己书写
        skuName: '',
        price: 0,
        weight: '',
        skuDesc: '',
        // 自己书写代码收集的数据
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   valueId: 0
          // }
        ],
        skuSaleAttrValueList: [],
        skuDefaultImage: '',
        skuImageList: [
          // {
          // imgName: item.imgName,
          // imgUrl: item.imgUrl,
          // isDefault: item.isDefault,
          // spuImgId: item.id
          // }
        ],
      },
      spu: {}, 
      // 收集图片的数据 当前缺少isDefault字段，提交服务器前需要整理参数
      imageList:[]
    }
  },
  methods: {
    // 父组件调用发请求  3个
    async getData (category1Id, category2Id, spu) {
      // console.log (spu) 收集父组件给的数据
      this.skuInfo.category3Id = spu.category3Id
      this.skuInfo.spuId = spu.spuId
      this.skuInfo.tmId = spu.tmId
      this.spu = spu

      // 获取图片
      let result = await this.$API.spu.reqSpuImageList (spu.id)
      if (result.code == 200) {
        let list = result.data
        // 给图片数据添加 isDefault字段
        list.forEach (item => {
          item.isDefault = 0 // 0是设置默认，1是默认
        })
        this.spuImageList = list
      }
      // 获取销售属性
      let result1 = await this.$API.spu.reqSpuSaleAttrList (spu.id)
      if (result1.code == 200) {
        this.spuSaleAttrList = result1.data
        
      }
      // 获取平台属性
      let result2 = await this.$API.spu.reqAttrInfoList (category1Id, category2Id,spu.category3Id)
      if (result2.code == 200) {
        this.attrInfoList = result2.data
      }
    },
    // 复选框变化事件 收集图片信息
    handleSelectionChange (selection) {
      // 注入了参数，是选中的数组
      // 获取到的图片数据 缺少isDefault字段，带给服务器保存的时候需要
      this.imageList = selection
    },
    // 设置默认排他事件
    changeDefault (row) {
      this.spuImageList.forEach (item => {
        item.isDefault = 0
      })
      row.isDefault = 1
      // 收集默认图片
      this.skuInfo.skuDefaultImage = row.imgUrl
    },
    // 取消
    cancel () {
      this.$emit ('changeScene1', 0)
      // 清除数据
      Object.assign (this._data, this.$options.data ())
    },
    // 保存事件
    async save () {
      // 整理参数：平台属性 
      const {attrInfoList, skuInfo, spuSaleAttrList, imageList} = this
      let arr = []
      attrInfoList.forEach (item => {
        if (item.attrIdAndValueId) {
          const [attrId, valueId] = item.attrIdAndValueId.split (':')
          let obj = {attrId, valueId}
          arr.push (obj)
        }
      })
      skuInfo.skuAttrValueList = arr
      // 整理参数：销售属性
      skuInfo.skuSaleAttrValueList = spuSaleAttrList.reduce ((prev, item) => {
        if (item.saleAttrIdAndValueId) {
          const [saleAttrId, saleAttrValueId] = item.saleAttrIdAndValueId.split (':')
          prev.push ({saleAttrId, saleAttrValueId})
        }
        return prev
      }, [])
      // 整理参数 图片
      skuInfo.skuImageList = imageList.map (item => {
        return {
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id
        }
      })
      // 发请求
      let result = await this.$API.spu.reqAddSku (skuInfo)
      // console.log (result)
      if (result.code == 200) {
        this.$message ({type: 'success', message: '添加sku成功'})
        this.$emit ('changeScene1', 0)
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
